<template>
    <div class="footpage">
        <div class="fl jump">
            <input class="page" type="text" v-model="page" @focus="pageFocus(page)" @blur="pageBlur(page,$event)" @change="pageChage(page)">
            <button type="button" class="toPage" @click="jumpPage()">跳转</button>
            <span>当前第{{page?page:prevPage}}/{{pages}}页，每页{{PiecePage}}条，共{{Pieces}}条记录</span>
        </div>
        <div class="fr upDown">
            <button type="button" class="" @click="pageHome()">首页</button>
            <button type="button" class="" @click="pageUp(page)">上一页</button>
            <button type="button" class="" @click="pageNext(page,pages)">下一页</button>
            <button type="button" class="" @click="pageLast(page,pages)">尾页</button>
        </div>
    </div>
</template>
<script>
// 上一页下一页
    export default{
        data(){
            return{
                prevPage:'',
                page:'1',
                pages:'',
            }
        },
        props:['Pieces','PiecePage','Page'],
        watch:{
            Pieces: function(val) { // 
                this.Pieces=val;
                if(this.Pieces < this.PiecePage){
                    this.pages=1;
                }else{
                    this.pages=Math.ceil(this.Pieces / this.PiecePage);
                }
            },
            Page: function(val) { // 
                this.Page=this.page=val;
                // console.log(val);
            },
        },
        methods:{
            pageFocus(page){
                if(page != ''){
                    this.prevPage = page;
                }
            },
            pageBlur(page,e){
                var self = this,
                    pageReg = /^[1-9]\d*$/;
                if(page != ''){
                    if(!pageReg.test(page)){
                        layer.msg('请输入合法字符，不以0开头的数字');
                        self.page = self.prevPage;
                        e.target.focus();
                    }else{
                        if(Number(page) > self.pages){
                            layer.msg('输入目标值太大');
                            self.page = self.prevPage;
                            e.target.focus();
                            
                            // new $.zxf.Dialog({
                            //     title:'输入目标值 太大',
                            //     content:'',
                            //     hideClose:true,
                            //     btn : [
                            //         {
                            //             name : "确定",
                            //             action : function(){
                            //                 self.page = self.prevPage;
                            //                 e.target.focus();
                            //                 return;
                            //             }
                            //         },{
                            //             name : "取消",
                            //             action : function(){
                            //                 self.page = self.prevPage;
                            //                 return;
                            //             }
                            //         }
                            //     ]
                            // })
                        }else{
                            return;
                        }
                    }
                    
                }else{
                    layer.msg('请输入跳转的目标页不可为空，且为数字');
                    self.page = self.prevPage;
                    e.target.focus();

                    // new $.zxf.Dialog({
                    //     title:'请输入跳转的目标页',
                    //     content:'不可为空，且为数字',
                    //     hideClose:true,
                    //     btn : [
                    //         {
                    //             name : "确定",
                    //             action : function(){
                    //                 e.target.focus();
                    //                 return;
                    //             }
                    //         },{
                    //             name : "取消",
                    //             action : function(){
                    //                 self.page = self.prevPage;
                    //                 return;
                    //             }
                    //         }
                    //     ]
                    // })
                }
            },
            pageChage(page){
                if(page == ''){
                    layer.msg('已经到首页');
                    this.page = 1;
                    e.target.focus();

                    // new $.zxf.Dialog({
                    //     title:'已经到首页！！！！',
                    //     content:'',
                    //     hideClose:true,
                    //     btn : [
                    //         {
                    //             name : "确定",
                    //             action : function(){
                    //                 self.page = 1;
                    //                 return;
                    //             }
                    //         },{
                    //             name : "取消",
                    //             action : function(){
                    //                 self.page = 1;
                    //                 return;
                    //             }
                    //         }
                    //     ]
                    // })
                }
            },
            pageHome(){
                if(this.page==1){
                    layer.msg('已经到首页');
                }else{
                    this.page=1;
                    this.$emit('current-page',this.page);
                }
                
            },
            pageUp(page){
                if(page > 1){
                    this.page--;
                    this.$emit('current-page',this.page);
                    return;
                } else {
                    layer.msg('已经是第一页了');
                    
                }
            },
            pageNext: function(page,pages){
                if(page < pages){
                    this.page++;
                    this.$emit('current-page',this.page);
                    return;
                } else {
                    layer.msg('已经是最后一页了');
                }
            },
            pageLast(page,pages){
                if(page == pages){
                    layer.msg('已经是尾页了');
                    // new $.zxf.Dialog({
                    //     title:'已经是尾页了！',
                    //     content:'',
                    //     hideClose:true,
                    //     btn : [
                    //         {
                    //             name : "确定",
                    //             action : function(){
                    //                 return;
                    //             }
                    //         }
                    //     ]
                    // })
                } else {
                    this.page=this.pages;
                    this.$emit('current-page',this.page);
                }
                
            },
            jumpPage(){
                var self = this;
                var page = self.page;
                this.$emit('current-page',this.page);
                return;
                
            },
        },
        mounted(){
            this.page=this.Page
            
            // 
            
            
        },
        beforeUpdate(){
            var self = this;
        }
    }
</script>
<style lang="scss" scoped>
    .footpage{
        color:#7f889c;
        height: 50px;
        line-height: 50px;
        background-color:#fff;
        border:1px solid #f0ebe8;
        box-sizing: content-box;
        .jump{
            margin-left: 15px;
            font-size: 12px;
            input,button{
                font-size: 12px;
            }
        }
        .upDown{
            margin-right: 15px;
            button{
                font-size: 12px;
                margin-left: 12px;
            }
        }
        .page{
            width: 80px;
        }
        .toPage{
            margin-left: 8px;
            margin-right: 15px;
        }
        button{
            padding-left: 12px;
            padding-right: 12px;
            background-color:#fff;
            color:#09ba79;
        }
        input,button{
            height: 35px;
            border:none;
            border:1px solid #f0ebe8;
            text-align:center;
            border-radius: 3px;
        }
    }
</style>